<template>
    <div class="position-page">
        <div class="content">
            <div>
                <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                    <el-table-column prop="name" label="触发行为（别名）" width="150"> </el-table-column>
                    <el-table-column prop="status" label="状态" width="100" :render-header="ActivityState"> </el-table-column>
                    <el-table-column prop="movement" label="触发行为（适用技术人员）"  width="100"> </el-table-column>
                    <el-table-column prop="remark" label="备注说明 " >  </el-table-column>
                    <el-table-column prop="address" label="操作 " width="100">
                        <template slot-scope="scope">
                            <el-button @click=" dialogVisible=true" type="text" size="small">去埋点</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div> 

        <el-dialog title="去埋点" :visible.sync="dialogVisible" size="small" >
            <div class="dialog-info">埋点，即代表开启了触发行为，您便可以使用强大的活动自动触发功能。</div>
            <div class="dialog-info"><b>开启方法：</b>如需开启该触发行为，请将触发行为（别名）告诉您的技术，活动盒子会有技术人员配合，协助您进行对接开启。</div>
        </el-dialog>      
    </div>
</template>

<script>
	import * as api from './../api/api';
export default {
    data(){
        return {
            tableData: [{
                name: '搜索',
                status:	'未埋点',
                movement:'search',
                remark: '开启后，用户搜索即可触发活动，以此鼓励用户搜索。用户使用搜索功能即是 帮助用户更深入的了解您的产品，无论是您优质的内容，商品，理财产品，教育 产品等，都可以更快速触达用户，为您快速粘住用户'
                }, {
                name: '点赞',
                status:	'未埋点',
                movement:'like',
                remark: '开启后，用户点赞即可触发活动，如果您的APP有点赞类功能，可以开启此触发， 来鼓励用户点赞，点赞会增加您和用户，用户和用户之间的互动，以此来提升 用户活跃'
                },{
                name: '分享',
                status:	'未埋点',
                movement:'share',
                remark: '开启后，用户分享即可触发活动，以此鼓励用户进行分享，刺激用户分享是一种 快速有效的拉新方式'
                },{
                name: '评价',
                status:	'未埋点',
                movement:'evaluation',
                remark: '开启后，用户评价即可触发活动，如果您的APP有评价类功能，可以开启此 触发，来鼓励用户发布评价，天猫等主流电商产品，均对用户的评价做出了 不同程度的奖励'
                },{
                name: '订阅',
                status:	'subscription',
                movement:'search',
                remark: '开启后，用户订阅即可触发活动，如果您的APP有订阅类功能，可以开启此 触发，来鼓励用户订阅您的内容，以此增加用户粘性。而订阅用户将您的内容 分享出去，也会实现一定的拉新效果'
                },{
                name: '收藏',
                status:	'未埋点',
                movement:'collect',
                remark: '开启后，用户收藏即可触发活动，如果您的APP有收藏类功能，可以开启此 触发，来鼓励用户收藏您的内容，以此增加用户粘性'
                },{
                name: '启动',
                status:	'未埋点',
                movement:'startup',
                remark: '开启后，用户启动APP即可触发活动，用于第一时间吸引用户'
                },{
                name: '支付',
                status:	'未埋点',
                movement:'purchase_success',
                remark: '开启后，用户支付即可触发活动，以此鼓励用户消费，同时，在这类活动中如果派送了优惠券等奖品，还可以引导用户进行二次消费'
                },{
                name: '注册',
                status:	'未埋点',
                movement:'registered',
                remark: '开启后，用户注册即可触发活动，以此奖励新用户，并引导新用户尽快完成支付等行为的转化'
                },{
                name: '登录',
                status:	'未埋点',
                movement:'logged',
                remark: '开启后，用户登录即可触发活动，以此增加用户粘性'
                },],
            dialogVisible:false,
        }
    },
    mounted(){
        
    },
    computed: {

    },
    methods: {
        //在渲染表头的时候，会调用此方法，h为createElement的缩写版  添加on.change事件即可
        ActivityState(h, {column}) {
            return h('span',[
                h('span', column.label),
                h('el-tooltip',{
                    attrs:{
                        content:'已埋点，您便可以使用活动自动触发功能，如需埋点，请点击去埋点',
                        effect:"light",
                        placement:"top-start"
                    }
                },[
                    h('span',{
                        class:'el-icon-information cursor',
                        style:'margin-left:6px;display:inline-block;color:#999;',
                        
                    })
                ]),   
            ]);
        },
    }
    
}
</script>

<style lang="less" scoped>
.position-page{
    height:100%;
    width:100%;
    background:#fff;
    padding:40px;
    box-sizing:border-box;
    overflow-y:auto;
    .content{
        min-width:1020px;
    }
    .add-btn{
        margin-bottom:20px;
        .btn{
            border-radius:20px;
            padding: 8px 25px;
        }
    }
    .dialog-info{
        margin-bottom:20px;
        color:#999;
        b{
            color:#333;
        }
    }
}
</style>
